<template>
	<view class="main-box">
		<u-navbar title="提交申请" @leftClick="leftClick"></u-navbar>
		<view class="" :style="{height: `${navHeight}px`}"></view>
		<view class="form-box">
			<u--form
				class=""
				labelPosition="left"
				:model="modelData"
				:rules="rules"
				labelWidth="auto"
				ref="uForm"
			>
				<view class="white-border-box">
					<view class="header-box">
						<view class="header-box-left-line"></view>
						<view class="header-box-title">个人信息</view>
					</view>
					<view class="form-block-box">
						
						<u-form-item label="提报人" required="true" prop="shopInfo.memberName" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.memberName"
								placeholder="请输入提报人"
								border="none"
							></u--input>
						</u-form-item>
						<u-form-item label="手机号" required="true" prop="shopInfo.memberPhone" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.memberPhone"
								placeholder="请输入手机号"
								border="none"
								type="number"
								maxlength="11"
							></u--input>
						</u-form-item>
						<u-form-item label="提报角色" required="true" prop="shopInfo.applyRoleValue" borderBottom labelWidth="80" @click="showRole = true" ref="item1">
						<!-- 							<u-radio-group v-model="modelData.shopInfo.applyRole" placement="row" @change="groupChange">
													    <u-radio
															:customStyle="{marginRight: '8px'}"
															v-for="(item, index) in applyRoleOptions"
															:key="index"
															:label="item.label"
															:name="item.name"
													    >
													    </u-radio>
													</u-radio-group> -->
							<u--input
								v-model="modelData.shopInfo.applyRoleValue"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择提报角色"
								border="none"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="店铺来源" required="true" prop="shopInfo.shopSourceValue" borderBottom labelWidth="80"  @click="showSource = true" ref="item1">
							<u--input
								v-model="modelData.shopInfo.shopSourceValue"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择店铺来源"
								border="none"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>
				</view>
				<view class="white-border-box">
					<view class="header-box">
						<view class="header-box-left-line"></view>
						<view class="header-box-title">选址信息</view>
					</view>
					<view class="form-block-box">
						<u-form-item  label="门店地址"  required="true" prop="shopInfo.shopAddress" borderBottom labelWidth="80" ref="item1" @click="mapChooseLocation()">
							<u--input v-model="modelData.shopInfo.shopAddress" placeholder="门店地址" border="none"  disabled disabledColor="#ffffff" ></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="建议店名"  required="true" prop="shopInfo.suggestionShopName" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.suggestionShopName"
								placeholder="好想来/来优品XXX店"
								border="none" 
								disabledColor="#ffffff"
							></u--input>
							<!-- <u-radio-group v-model="modelData.shopInfo.shopStatus" placement="row">
							    <u-radio
									:customStyle="{marginRight: '8px'}"
									v-for="(item, index) in shopStatusOptions"
									:key="index"
									:label="item.label"
									:name="item.name"
							    >
							    </u-radio>
							</u-radio-group> -->
						</u-form-item>
						<u-form-item  label="最近我司门店"  required="true" prop="shopInfo.nearestShop" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.nearestShop"
								placeholder="选择地址后自动填充"
								border="none" 
								disabled
								disabledColor="#ffffff"
							></u--input>
						</u-form-item>
						<u-form-item  label="最近我司门店距离"  required="true" prop="shopInfo.nearestShopDistance" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.nearestShopDistance"
								placeholder="选择地址后自动填充"
								border="none" 
								disabled
								disabledColor="#ffffff"
							></u--input>
							<u-text slot="right" text="KM"></u-text> 
						</u-form-item>
						<u-form-item  label="商圈名称"  required="true" prop="shopInfo.businessName" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.businessName"
								placeholder="请输入商圈名称"
								border="none"
								disabledColor="#ffffff"
							></u--input>
						</u-form-item>
						<u-form-item  label="商圈类型"  required="true" prop="shopInfo.businessTypeValue" borderBottom labelWidth="80" @click="showSubMarker = true" ref="item1">
							<u--input
								v-model="modelData.shopInfo.businessTypeValue"
								placeholder="请选择商圈类型"
								border="none"
								disabled
								disabledColor="#ffffff"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item  label="店铺位置类型"  required="true" prop="shopInfo.shopPositionTypeValue" borderBottom labelWidth="80" @click="showPositionType = true" ref="item1">
							<u--input
								v-model="modelData.shopInfo.shopPositionTypeValue"
								placeholder="请选择店铺位置类型"
								border="none"
								disabled
								disabledColor="#ffffff"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item  label="店铺结构"  required="true" prop="shopInfo.shopStructureValue" borderBottom labelWidth="80" @click="showShopStructure = true" ref="item1">
							<u--input
								v-model="modelData.shopInfo.shopStructureValue"
								placeholder="请选怎店铺结构"
								border="none"
								disabled
								disabledColor="#ffffff"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="门头照片(四周)" required="true" prop="shopInfo.doorPhoto" borderBottom labelWidth="80" ref="item1">
							<u-upload
								:fileList="modelData.shopInfo.doorPhoto"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								:maxCount="2"
								:previewFullImage="true"
							></u-upload>
						</u-form-item>
						<u-form-item label="周边环境照片及热力图" required="true" prop="shopInfo.envHeatMapPhoto" borderBottom labelWidth="80" ref="item1">
							<u-upload
								:fileList="modelData.shopInfo.envHeatMapPhoto"
								@afterRead="afterRead"
								@delete="deletePic"
								name="2"
								:maxCount="2"
								:previewFullImage="true"
							></u-upload>
						</u-form-item>
						<u-form-item label="店铺内部视频" required="true" prop="shopInfo.shopInnerVideo"  labelWidth="80" ref="item1">
							<u-upload
								:fileList="modelData.shopInfo.shopInnerVideo"
								@afterRead="afterReadVideo"
								@delete="deleteVideo"
								name="2"
								:maxCount="1"
								accept="video"
								:previewFullImage="true"
							></u-upload>
						</u-form-item>
					</view>
				</view>
				<view class="white-border-box">
					<view class="header-box">
						<view class="header-box-left-line"></view>
						<view class="header-box-title">场地信息</view>
					</view>
					<view class="form-block-box">
						
						<u-form-item label="门头尺寸"  required="true" prop="shopInfo.doorSize" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.doorSize"
								placeholder="长: xx米 / 宽: xx米"
								border="none"
							></u--input>
						</u-form-item>

						<u-form-item label="套内面积" required="true" prop="shopInfo.internalArea" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.internalArea"
								placeholder="请输入套内面积"
								border="none"
								type="number"
							></u--input>
							<u-text slot="right" text="平方米"></u-text> 
						</u-form-item>
						<u-form-item label="营业面积" required="true" prop="shopInfo.businessArea" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.businessArea"
								placeholder="请输入营业面积"
								border="none"
								type="number"
							></u--input>
							<u-text slot="right" text="平方米"></u-text> 
						</u-form-item>
						<u-form-item label="仓库面积" required="true" prop="shopInfo.warehouseArea" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.warehouseArea"
								placeholder="请输入仓库面积"
								border="none"
								type="number"
							></u--input>
							<u-text slot="right" text="平方米"></u-text> 
						</u-form-item>
						<u-form-item label="户型图" required="true" prop="shopInfo.houseTypePhoto" borderBottom labelWidth="80" ref="item1">
							<u-upload
								:fileList="modelData.shopInfo.houseTypePhoto"
								@afterRead="afterRead"
								@delete="deletePic"
								name="3"
								:maxCount="2"
								:previewFullImage="true"
							></u-upload>
						</u-form-item>
						<u-form-item label="房屋可操作性" required="true" prop="shopInfo.houseOperateSize" borderBottom labelWidth="80" ref="item1">
							<u-checkbox-group v-model="modelData.shopInfo.houseOperateSize" placement="row" @change="checkboxChange">
								<u-checkbox
									:customStyle="{marginRight: '4px'}"
									v-for="(item, index) in checkboxList1"
									:key="index"
									:label="item.name"
									:name="item.value"
									:disabled="item.disabled"
								>
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
						<u-form-item label="是否分租" required="true" prop="shopInfo.isConsiderSublet" borderBottom labelWidth="80" ref="item1">
							<u-radio-group v-model="modelData.shopInfo.isConsiderSublet" placement="row">
							    <u-radio
									:customStyle="{marginRight: '8px'}"
									v-for="(item, index) in isSubletOptions"
									:key="index"
									:label="item.label"
									:name="item.name"
							    >
							    </u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="是否可以改造" required="true" prop="shopInfo.isEnableUpgrade" borderBottom labelWidth="80" ref="item1">
							<u-radio-group v-model="modelData.shopInfo.isEnableUpgrade" placement="row">
							    <u-radio
									:customStyle="{marginRight: '8px'}"
									v-for="(item, index) in isSubletOptions"
									:key="index"
									:label="item.label"
									:name="item.name"
							    >
							    </u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="是否需要改造" required="true" prop="shopInfo.isNeedUpgrade" borderBottom labelWidth="80" ref="item1">
							<u-radio-group v-model="modelData.shopInfo.isNeedUpgrade" placement="row">
							    <u-radio
									:customStyle="{marginRight: '8px'}"
									v-for="(item, index) in isSubletOptions"
									:key="index"
									:label="item.label"
									:name="item.name"
							    >
							    </u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="三相电" required="true" prop="shopInfo.threePhaseElectricity" borderBottom labelWidth="80" ref="item1">
							<u-radio-group v-model="modelData.shopInfo.threePhaseElectricity" placement="row">
							    <u-radio
									:customStyle="{marginRight: '8px'}"
									v-for="(item, index) in threePhaseElectricityOptions"
									:key="index"
									:label="item.label"
									:name="item.name"
							    >
							    </u-radio>
							</u-radio-group>
						</u-form-item>
						
						<u-form-item label="交房时间" required="true" prop="shopInfo.houseDeliveryTime" borderBottom labelWidth="80" @click="showDatePicker = true; hideKeyboard()" ref="item1">
							<u--input
								v-model="modelData.shopInfo.houseDeliveryTime"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择交房时间"
								border="none"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="计租时间" required="true" prop="shopInfo.rentCalculationTime" borderBottom labelWidth="80" @click="showPlanDatePicker = true; hideKeyboard()" ref="item1">
							<u--input
								v-model="modelData.shopInfo.rentCalculationTime"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择交房时间"
								border="none"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>
				</view>
				<view class="white-border-box">
					<view class="header-box">
						<view class="header-box-left-line"></view>
						<view class="header-box-title">费用信息</view>
					</view>
					<view class="form-block-box">
						<u-form-item label="转让费" required="true" prop="shopInfo.transferFee" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.transferFee"
								placeholder="请输入转让费"
								border="none"
								type="number"
							></u--input>
							<u-text slot="right" text="元"></u-text> 
						</u-form-item>
						<u-form-item label="押金" required="true" prop="shopInfo.deposit" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.deposit"
								placeholder="请输入押金"
								border="none"
								type="number"
							></u--input>
							<u-text slot="right" text="元"></u-text> 
						</u-form-item>
						<u-form-item label="房租" required="true" prop="shopInfo.rent" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.rent"
								placeholder="请输入房租"
								border="none"
								type="number"
							></u--input>
							<u-text slot="right" text="元"></u-text> 
						</u-form-item>
						<u-form-item label="水费" required="true" prop="shopInfo.waterFee" borderBottom labelWidth="80" ref="item1">
							<u--input v-model="modelData.shopInfo.waterFee" placeholder="请输入水费" border="none" type="number"></u--input>
							<u-text slot="right" text="元/吨"></u-text> 
						</u-form-item>
						<u-form-item label="电费" required="true" prop="shopInfo.electricityFee" borderBottom labelWidth="80" ref="item1">
							<u--input v-model="modelData.shopInfo.electricityFee" placeholder="请输入电费" border="none" type="number"></u--input>
							<u-text slot="right" text="元/度"></u-text> 
						</u-form-item>
						<u-form-item label="物业费" required="true" prop="shopInfo.propertyFee" borderBottom labelWidth="80" ref="item1">
							<u--input v-model="modelData.shopInfo.propertyFee" placeholder="请输入物业费" border="none" type="number" ></u--input>
							<u-text slot="right" text="元/年"></u-text> 
						</u-form-item>
						<u-form-item label="房租递增预估" required="true" prop="shopInfo.houseDecreaseEstimate" borderBottom labelWidth="80" ref="item1">
							<u--input
								v-model="modelData.shopInfo.houseDecreaseEstimate"
								placeholder="请输入房租递增预估"
								border="none"
							></u--input>
							<u-text slot="right" text="元"></u-text> 
						</u-form-item>
						<u-form-item label="房租支付方式" required="true" prop="shopInfo.rentPayWayValue" labelWidth="120" borderBottom @click="showPayWayPop" ref="item1">
							<u--input
								v-model="modelData.shopInfo.rentPayWayValue"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择房租支付方式"
								border="none"
							></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="预估营业额" required="true" prop="shopInfo.rent" borderBottom labelWidth="80" ref="item1">
							<u--input v-model="modelData.shopInfo.estimateTurnover" placeholder="请输入预估营业额" border="none" type="number"></u--input>
							<u-text slot="right" text="元/月"></u-text> 
						</u-form-item>
						<u-form-item label="基础信息补充" prop="shopInfo.note"  labelWidth="80" ref="item1">
							<u--textarea border v-model="modelData.shopInfo.basicInfoSupplement" placeholder="备注" ></u--textarea>
						</u-form-item>
					</view>
				</view>
				
			</u--form>
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u-datetime-picker
				:show="showDatePicker"
				v-model="modelData.shopInfo.houseDeliveryTime"
				:formatter="formatter"
				mode="date"
				ref="datetimePicker"
				@cancel="timeCancel"
				@confirm="timeConfirm"
			></u-datetime-picker>
			<u-datetime-picker
				:show="showPlanDatePicker"
				v-model="modelData.shopInfo.rentCalculationTime"
				:formatter="formatter"
				mode="date"
				ref="datetimePicker"
				@cancel="timeCancel"
				@confirm="planTimeConfirm"
			></u-datetime-picker>
			
			<!-- 租金 -->
			<u-action-sheet
				:show="showPayWay"
				:actions="rentPayWayOptions"
				round="10"
				@close="showPayWay = false"
				@select="payWaySelect"
			>
			</u-action-sheet>
			<!-- 角色 -->
			<u-picker :show="showRole" :columns="applyRoleOptions" keyName="label" @cancel="showRole = false" @confirm="roleConfirm"></u-picker>
			<!-- 店铺来源 -->
			<u-picker :show="showSource" :columns="sourceOptions" keyName="label" @cancel="showSource = false" @confirm="sourceConfirm"></u-picker>
			<!-- 商圈类型 -->
			<u-picker :show="showSubMarker" :columns="subMarkerTypeOptions" keyName="label" @cancel="showSubMarker = false" @confirm="subMarkerConfirm"></u-picker>
			<!-- 店铺位置类型 -->
			<u-picker :show="showPositionType" :columns="positionTypeOptions" keyName="label" @cancel="showPositionType = false" @confirm="positionTypeConfirm"></u-picker>
			<!-- 店铺位置类型 -->
			<u-picker :show="showShopStructure" :columns="shopStructureOptions" keyName="label" @cancel="showShopStructure = false" @confirm="shopStuctureConfirm"></u-picker>
		</view>
		<view class="bottom-box">
			<view class="normal-btn" @click="cunData">暂存信息</view>
			<view class="confirm-btn" @click="applyData">提交申请</view>
		</view>
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
	import { 
		initApproval ,
		storeNearestOne
	} from '@/api/commen.js'
	import http from '@/comment/vmeitime-http/interface.js'
	export default {
		data() {
			return {
				nearShopData: null,
				navHeight: 44,
				fileList1: [],
				fileList2: [],
				showRole: false,	// 角色弹窗
				applyRoleOptions : [ // 申请角色选项 
					[{ name: 0, label: '市场专员' },
					{ name: 1, label: '（意向）加盟商' },
					{ name: 2, label: '加盟商' }]
				],
				showSource: false,	// 店铺来源弹窗
				// 店铺来源
				sourceOptions : [
					[{ name: 0, label: '自选地址' },
					 { name: 1, label: '带铺加盟' },
					 { name: 1, label: '翻牌' }]
				],
				showSubMarker: false, // 商圈类型
				subMarkerTypeOptions: [
					[{ name: 0, label: '住宅型' },
					 { name: 1, label: '办公型' },
					 { name: 2, label: '学校型' },
					 { name: 3, label: '医院型' },
					 { name: 4, label: '商业型' },
					 { name: 5, label: '景区型' },
					 { name: 6, label: '交通枢纽型' },
					 { name: 7, label: '园区型' },]
				],
				showPositionType: false, // 店铺位置类型
				positionTypeOptions: [
					[{ name: 0, label: '十字铺' },
					 { name: 1, label: '丁字型' },
					 { name: 2, label: '平铺型' },
					 { name: 3, label: '其他' },]
				],
				// 店铺结构
				showShopStructure: false,
				shopStructureOptions: [
					[{ name: 0, label: '一层' },
					 { name: 1, label: '二层' },
					 { name: 2, label: '其他' },]
				],
				// 门店状态选项
				shopStatusOptions : [
					{ name: 0, label: '空铺' },
					{ name: 1, label: '非空铺' },
				],
				// 门店三相电选项
				threePhaseElectricityOptions : [
					{ name: 0, label: '无' },
					{ name: 1, label: '有' },
				],
				// 是否分租
				isSubletOptions : [
					{ name: 0, label: '否' },
					{ name: 1, label: '是' },
				],
				// 房租支付方式选项
				rentPayWayOptions : [
					{ value: '0', name: '年付' },
					{ value: '1', name: '半年付' },
					{ value: '2', name: '季付' },
					{ value: '3', name: '其他' },
				],
				checkboxList1: [
					{
						name: '可转让',
						disabled: false,
						value: 0,
					},
					{
						name: '可转租',
						disabled: false,
						value: 1,
					},
					{
						value: 2,
						name: '可分租',
						disabled: false
					}
				],
				modelData: {
					shopInfo: {
						applyRole: 0,
						applyRoleValue: '',
						shopSource: 0,
						shopSourceValue: '',
						memberName: "", // 提报人
						menberPhone: "",	// 提报人手机号
						investmentManager: "",	
						suggestionShopName: "", // 门店建议名
						shopLat: "",
						shopLng: "",	
						shopAddress: "",	// 门店地址
						nearestShop: "",	// 最近我司门店
						nearestShopDistance: "",	// 最近我司门店距离
						businessName: "",
						businessType: 0,	// 商铺类型
						businessTypeValue: "",	
						shopPositionType: 0, // 店铺位置类型
						shopPositionTypeValue: "",
						shopStructure: 0,	// 店铺结构
						shopStructureValue: "",
						doorSize: "",	// 门头尺寸
						internalArea: "", // 套内面积
						businessArea: "", // 营业面积
						warehouseArea: "", // 仓库面积
						shopStatus: 0,
						houseOperateSize : [], // 房屋可操作性
						isConsiderSublet: 0, // 是否考虑分租
						isEnableUpgrade: 0, // 是否可以改造
						isNeedUpgrade: 0, // 是否需要改造
						doorPhoto: [],		// 门面照片
						shopInnerVideo: [],  // 店内视频
						envHeatMapPhoto: [], // 热力图
						houseTypePhoto: [], // 户型图 
						threePhaseElectricity: 0, // 三相电
						houseDeliveryTime: '', // 交房时间
						rentCalculationTime: "", // 计租时间
						deposit: "", // 押金
						transferFee: "", // 转让费
						rent: "",  // 房租
						waterFee: "" ,// 水费
						electricityFee : "", // 电费
						propertyFee : "", // 物业费
						houseDecreaseEstimate: "", // 房屋递曾预估
						estimateTurnover: "", // 预估营业额
						basicInfoSupplement: "", // 基本信息补充
						rentPayWay: "",	// 房租支付方式
						rentPayWayValue: "",
						isSublet: 0,
						note: "",
					}
				},
				rules: {
					'shopInfo.memberName': {
						type: 'string',
						required: true,
						message: '请输入提报人姓名',
						trigger: ['blur', 'change']
					},
					'shopInfo.memberPhone': {
						type: 'string',
						required: true,
						len: 11,
						message: '请输入提报人11位手机号',
						trigger: ['blur', 'change']
					},
					'shopInfo.applyRoleValue': {
						type: 'string',
						required: true,
						message: '请选择提报角色',
						trigger: ['blur', 'change']
					},
					'shopInfo.shopSourceValue': {
						type: 'string',
						required: true,
						message: '请选择店铺来源',
						trigger: ['blur', 'change']
					},
					'shopInfo.suggestionShopName': {
						type: 'string',
						required: true,
						message: '请输入建议店名',
						trigger: ['blur', 'change']
					},
					'shopInfo.shopAddress': {
						type: 'string',
						required: true,
						message: '请选择门店地址',
						trigger: ['blur', 'change']
					},
					'shopInfo.businessName': {
						type: 'string',
						required: true,
						message: '请输入商圈名称',
						trigger: ['blur', 'change']
					},
					'shopInfo.businessTypeValue': {
						type: 'string',
						required: true,
						message: '请选择商圈类型',
						trigger: ['blur', 'change']
					},
					'shopInfo.shopPositionTypeValue': {
						type: 'string',
						required: true,
						message: '请选择门店位置类型',
						trigger: ['blur', 'change']
					},
					'shopInfo.shopStructureValue': {
						type: 'string',
						required: true,
						message: '请选择门店结构',
						trigger: ['blur', 'change']
					},
					'shopInfo.doorSize': {
						type: 'string',
						required: true,
						message: '请输入门头尺寸',
						trigger: ['blur', 'change']
					},
					'shopInfo.internalArea': {
						type: 'string',
						required: true,
						message: '请输入套内面积',
						trigger: ['blur', 'change']
					},
					'shopInfo.businessArea': {
						type: 'string',
						required: true,
						message: '请输入营业面积',
						trigger: ['blur', 'change']
					},
					'shopInfo.warehouseArea': {
						type: 'string',
						required: true,
						message: '请输入仓库面积',
						trigger: ['blur', 'change']
					},
					'shopInfo.houseOperateSize': {
						type: 'array',
						required: true,
						message: '请选择房屋可操作性',
						trigger: ['blur', 'change']
					},
					'shopInfo.doorPhoto': {
						type: 'array',
						max: 2,
						required: true,
						message: '请选择门店照片',
						trigger: ['blur', 'change']
					},
					'shopInfo.envHeatMapPhoto': {
						type: 'array',
						max: 2,
						required: true,
						message: '请选择门店照片',
						trigger: ['blur', 'change']
					},
					'shopInfo.houseTypePhoto': {
						type: 'array',
						max: 2,
						required: true,
						message: '请选择门店照片',
						trigger: ['blur', 'change']
					},
					'shopInfo.shopInnerVideo': {
						type: 'array',
						required: true,
						message: '请选择门店视频',
						trigger: ['blur', 'change']
					},
					'shopInfo.transferFee': {
						type: 'string',
						required: true,
						message: '请输入转让费',
						trigger: ['blur', 'change']
					},
					'shopInfo.deposit': {
						type: 'string',
						required: true,
						message: '请输入押金',
						trigger: ['blur', 'change']
					},
					'shopInfo.rent': {
						type: 'string',
						required: true,
						message: '请输入房租',
						trigger: ['blur']
					},
					'shopInfo.waterFee': {
						type: 'string',
						required: true,
						message: '请输入水费',
						trigger: ['blur', 'change']
					},
					'shopInfo.electricityFee': {
						type: 'string',
						required: true,
						message: '请输入电费',
						trigger: ['blur', 'change']
					},
					'shopInfo.propertyFee': {
						type: 'string',
						required: true,
						message: '请输入物业费',
						trigger: ['blur', 'change']
					},
					'shopInfo.houseDecreaseEstimate': {
						type: 'string',
						required: true,
						message: '请输入房屋递增预估',
						trigger: ['blur', 'change']
					},
					'shopInfo.estimateTurnover': {
						type: 'string',
						required: true,
						message: '请输入预估营业额',
						trigger: ['blur', 'change']
					},
					'shopInfo.rentPayWayValue': {
						type: 'string',
						required: true,
						message: '请选择支付方式',
						trigger: ['blur', 'change']
					},
				},
				showDatePicker: false,
				showPlanDatePicker: false,
				showPayWay: false,
			};
		},
		onLoad() {
			this.modelData.shopInfo.houseDeliveryTime = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
			this.modelData.shopInfo.rentCalculationTime = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
			this.getHeight();
			this.loadSavaData();
			// let _this = this ;
			// storeNearestOne({lat : 116.421269, lon: 39.895666}).then(res => {
			// 	console.log(res);
			// 	if (res.code == 200) {
			// 		_this.nearShopData = res.data;
			// 		_this.modelData.shopInfo.shopAddress = "北京市天安门",
			// 		_this.modelData.shopInfo.shopLat = 116.421269
			// 		_this.modelData.shopInfo.shopLng = 39.895666
			// 		_this.modelData.shopInfo.nearestShop = res.data.storeName;
			// 		_this.modelData.shopInfo.nearestShopDistance = parseFloat(res.data.linearDistance).toFixed(2) ;
			// 	}
			// })
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			getHeight(){
				uni.getSystemInfo({
				    success: (e) => {
						// this.compareVersion(e.SDKVersion, '2.5.0')
						let statusBar = 0  //状态栏高度
						let customBar = 0  // 状态栏高度 + 导航栏高度  
						let navbar = 0 // 自定义标题与胶囊对齐高度
						statusBar = e.statusBarHeight
						const custom = wx.getMenuButtonBoundingClientRect()
						customBar = custom.bottom + custom.top - e.statusBarHeight
						navbar = (custom.top - e.statusBarHeight) * 2 + custom.height

						this.navHeight = customBar
				    }
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			mapChooseLocation() {
				let _this = this;
				uni.chooseLocation({
					success(res) {
						console.log(res);
						if (res.errMsg === 'chooseLocation:ok') {
							_this.modelData.shopInfo.shopAddress = res.address
							_this.modelData.shopInfo.shopLng = res.longitude
							_this.modelData.shopInfo.shopLat = res.latitude
							storeNearestOne({lat : res.latitude, lon: res.longitude}).then(res => {
								console.log(res);
								if (res.code == 200) {
									_this.nearShopData = res.data;
									_this.modelData.shopInfo.nearestShop = res.data.storeName;
									_this.modelData.shopInfo.nearestShopDistance = parseFloat(res.data.linearDistance).toFixed(2) ;
								}
							})
						}
					}
				})
			},
			// // 角色变化
			groupChange(e) {
				console.log(e);
			},
			sourceChange(e){
				console.log(e)
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			showPayWayPop() {
				// this.showPayWay = true; 
				// this.hideKeyboard();
				let _this = this;
				uni.showActionSheet({
					itemList: ['年付', "半年付", "季付", "其他"],
				 	success(res) {
						console.log(res.tapIndex);
						const payWay = _this.rentPayWayOptions[res.tapIndex];
						_this.modelData.shopInfo.rentPayWay = payWay.value;
						_this.modelData.shopInfo.rentPayWayValue = payWay.name
						_this.$refs.uForm.validateField('shopInfo.rentPayWayValue');
					}
				})
			},
			// 角色
			roleConfirm(e) {
				console.log(e.value[0]);
				this.modelData.shopInfo.applyRole = e.value[0].name
				this.modelData.shopInfo.applyRoleValue = e.value[0].label
				this.showRole = false;
				this.$refs.uForm.validateField('shopInfo.applyRoleValue');
			},
			// 店铺来源
			sourceConfirm(e) {
				console.log(e.value[0]);
				this.modelData.shopInfo.shopSource = e.value[0].name
				this.modelData.shopInfo.shopSourceValue = e.value[0].label
				this.showSource = false;
				this.$refs.uForm.validateField('shopInfo.shopSourceValue');
			},
			// 商户类型
			subMarkerConfirm(e) {
				console.log(e.value[0]);
				this.modelData.shopInfo.businessType = e.value[0].name
				this.modelData.shopInfo.businessTypeValue = e.value[0].label
				this.showSubMarker = false;
				this.$refs.uForm.validateField('shopInfo.businessTypeValue');
			},
			// 店铺位置类型
			positionTypeConfirm(e) {
				console.log(e.value[0]);
				this.modelData.shopInfo.shopPositionType = e.value[0].name
				this.modelData.shopInfo.shopPositionTypeValue = e.value[0].label
				this.showPositionType = false;
				this.$refs.uForm.validateField('shopInfo.shopPositionTypeValue');
			},
			// 店铺结构类型
			shopStuctureConfirm(e) {
				console.log(e.value[0]);
				this.modelData.shopInfo.shopStructure = e.value[0].name
				this.modelData.shopInfo.shopStructureValue = e.value[0].label
				this.showShopStructure = false;
				this.$refs.uForm.validateField('shopInfo.shopStructureValue');
			},
			async payWaySelect(e) {
				this.modelData.shopInfo.rentPayWay = e.value;
				this.modelData.shopInfo.rentPayWayValue = e.name
				await this.$refs.uForm.validateField('shopInfo.rentPayWayValue');
				console.log(e, this.modelData);
			},
			timeCancel(){
				this.showDatePicker = false
				this.showPlanDatePicker = false
			},
			timeConfirm(e){
				this.showDatePicker = false
				let _this = this
				const time = uni.$u.timeFormat(new Date(e.value), 'yyyy-mm-dd hh:MM:ss')
				setTimeout(function() {
					_this.modelData.shopInfo.houseDeliveryTime = time;
				}, 0);
			},
			planTimeConfirm(e){
				this.showPlanDatePicker = false
				let _this = this
				const time = uni.$u.timeFormat(new Date(e.value), 'yyyy-mm-dd hh:MM:ss')
				setTimeout(function() {
					_this.modelData.shopInfo.rentCalculationTime = time;
				}, 0);
			},
			// 删除图片
			deletePic(event) {
				// this[`fileList${event.name}`].splice(event.index, 1)
				let photoData = this.modelData.shopInfo.doorPhoto;
				if (event.name == '1') {
					photoData = this.modelData.shopInfo.doorPhoto
				} else if (event.name == '2') { 
					photoData = this.modelData.shopInfo.envHeatMapPhoto
				} else if (event.name == '3') { 
					photoData = this.modelData.shopInfo.houseTypePhoto
				}
				photoData.splice(event.index, 1)
			},
			async afterRead(event) {
				console.log(event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let photoData = this.modelData.shopInfo.doorPhoto;
				if (event.name == '1') {
					photoData = this.modelData.shopInfo.doorPhoto
				} else if (event.name == '2') { 
					photoData = this.modelData.shopInfo.envHeatMapPhoto
				} else if (event.name == '3') { 
					photoData = this.modelData.shopInfo.houseTypePhoto
				}
				let lists = [].concat(event.file)
				let fileListLen = photoData.length
				lists.map((item) => {
					photoData.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = photoData[fileListLen]
					photoData.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: http.config.baseUrl + result,
						normalUrl: result,
					}))
					fileListLen++
				}
				console.log(photoData);
			},
			// 删除视频
			deleteVideo(event) {
				this.modelData.shopInfo.shopInnerVideo.splice(event.index, 1)
			},
			async afterReadVideo(event) {
				console.log(event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.modelData.shopInfo.shopInnerVideo.length
				lists.map((item) => {
					this.modelData.shopInfo.shopInnerVideo.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.modelData.shopInfo.shopInnerVideo[fileListLen]
					this.modelData.shopInfo.shopInnerVideo.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: http.config.baseUrl + result,
						normalUrl: result,
					}))
					fileListLen++
				}
				console.log(this.modelData.shopInfo.shopInnerVideo);
			},
			uploadFilePromise(url) {
				const token = uni.getStorageSync('token')
				return new Promise((resolve, reject) => {
					uni.upload
					let a = uni.uploadFile({
						url: http.config.baseUrl + '/wechat/upload', 
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							"Authorization": 'Bearer ' + token
						},
						success: (res) => {
							console.log(res);
							setTimeout(() => {
								const data = JSON.parse(res.data);
								if (data.code == '200') {
									resolve(data.data.url)
								}
							}, 1000)
						}
					});
				})
			},
			// 删除视频
			deleteVideo() {
				this[`videoList`].splice(event.index, 1);
			},
			// 提交申请
			applyData() {
				let _this = this;
				this.$refs.uForm.validate().then(async res => {
					console.log(_this.modelData.shopInfo);
					var newPhoto = [];
					var newPhoto2 = [];
					var newPhoto3 = [];
					var newVideo = [];
					_this.modelData.shopInfo.doorPhoto.forEach(item => {
						newPhoto.push(item.normalUrl)
					})
					_this.modelData.shopInfo.envHeatMapPhoto.forEach(item => {
						newPhoto2.push(item.normalUrl)
					})
					_this.modelData.shopInfo.houseTypePhoto.forEach(item => {
						newPhoto3.push(item.normalUrl)
					})
					_this.modelData.shopInfo.shopInnerVideo.forEach(item => {
						newVideo.push(item.normalUrl)
					})
					let sss = ''
					_this.modelData.shopInfo.houseOperateSize.forEach((item, index) => {
						if (index == 0) {
							sss = item
						} else {
							sss = sss + ',' + item
						}
					})
					uni.showLoading({
						title: "提交中..."
					})
					const tempParams = {
						..._this.modelData.shopInfo,
						doorPhoto: newPhoto,
						shopInnerVideo: newVideo,
						houseTypePhoto: newPhoto3,
						envHeatMapPhoto: newPhoto2,
						houseOperateSize: sss
					}
					initApproval(tempParams).then(response => {
						uni.hideLoading()
						console.log(response);
						if (response.code == 200) {
							uni.showModal({
								title: "提示",
								content: "提交成功，请等待管理人员审核~",
								showCancel: false,
								success(res) {
									if (res.confirm) {
										uni.navigateBack();
									}
								}
							})
						}else {
							// uni.showToast({
							// 	title: '错误'
							// })
						}
					});
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
				// initApproval(_this.modelData.shopInfo).then(response => {
				// 	console.log(response);   
				// });
				
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			// 加载存储的数据
			loadSavaData() {
				var saveData = uni.getStorageSync('userSave');
				if (saveData) {
					console.log(saveData);
					this.modelData.shopInfo = saveData;
				}
			},
			// 返回判断
			leftClick() {
				let bSave = false;
				if ( this.modelData.shopInfo.name !== '' ||
					this.modelData.shopInfo.phone !== '' ||
					this.modelData.shopInfo.investmentManager !== '' ||
					this.modelData.shopInfo.suggestionShopName !== '' ||
					this.modelData.shopInfo.shopLat !== '' ||
					this.modelData.shopInfo.shopLng !== '' ||
					this.modelData.shopInfo.shopAddress !== '' ||
					this.modelData.shopInfo.shopWide !== '' ||
					this.modelData.shopInfo.shopLong !== '' ||
					this.modelData.shopInfo.doorPhoto.length > 0 ||
					this.modelData.shopInfo.shopInnerVideo.length > 0 ||
					this.modelData.shopInfo.area !== '' ||
					this.modelData.shopInfo.businessArea !== '' ||
					this.modelData.shopInfo.warehouseArea !== '' ||
					this.modelData.shopInfo.facadeSize !== '' ||
					this.modelData.shopInfo.transferFee !== '' ||
					this.modelData.shopInfo.rent !== '' ||
					this.modelData.shopInfo.rentPayWay !== '' ||
					this.modelData.shopInfo.rentPayWayValue !== '' ||
					this.modelData.shopInfo.note !== '' 
					 ) 
				{
					bSave = true;
				}
				if (!bSave) {
					uni.navigateBack();
				}else {
					var _this = this;
					uni.showModal({
						showCancel: true,
						title: '提示',
						content: '您有修改的资料未保存,是否保存资料?',
						confirmText: '保存',
						cancelText: '否',
						success(res) {
							if (res.confirm) {
								uni.setStorageSync('userSave', _this.modelData.shopInfo);
								uni.navigateBack({})
							} else if (res.cancel) {
								uni.navigateBack({})
							}
						}
					})
				}
			},
			cunData() {
				uni.setStorageSync('userSave', this.modelData.shopInfo);
				uni.showToast({
					title: "信息暂存成功"
				})
			}
		}
	}
</script>

<style lang="scss">
	.main-box{ 
		padding: 12px 12px;
		position: relative;
		.form-box{
			height: 100%;
			overflow: auto;
			margin-bottom: 72px;
			.white-border-box {
				background-color: white;
				margin-bottom: 16px;
				border-radius: 5px;
				min-height: 50px;
				.header-box {
					position: relative;
					height: 36px;
					padding: 8px;
					display: flex;
					align-items: center;
					gap: 8px;
					border-bottom: 1px solid #d6d7d9;
					&-left-line {
						height: 18px;
						width: 4px;
						border-radius: 4px;
						background-color: $theme-color;
					}
					&-title {
						font-size: 18px;
						color: #000;
					}
				}
				.form-block-box{
					padding: 8px 16px;
					padding-bottom: 4px;
				}
			}
		}
		.bottom-box{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 40px;
			box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
			display: flex;
			padding: 10px 16px;
			align-items: center;
			background-color: white;
			z-index: 10;
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom);  
			gap: 10px;
			.confirm-btn {
				height: 40px;
				border-radius: 8px;
				line-height: 40px;
				text-align: center;
				background: linear-gradient(to right, #17c1ff 50%, #007aff 100%);
				color: white;
				font-size: 18px;
				font-weight: bold;
				flex: 2;
			}
			.normal-btn {
				height: 40px;
				border-radius: 8px;
				line-height: 40px;
				text-align: center;
				background: #fff;
				color: #999;
				border: 1rpx solid #999;
				font-size: 18px;
				font-weight: normal;
				flex: 1;
			}
		}
	}
	.flex-box{
		display: flex;
		align-items: center;
		.map-btn {
			width: 80px;
		}
	}
</style>
